﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Log</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="MSThemeCompatible" content="Yes" />
	<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5" />
	
	<style type="text/css">
		html, body
		{
			margin: 0;
			background: #FFFFFF;
			font-family: Lucida Grande, Tahoma, sans-serif;
			font-size: 11px;
		}
		
		.log { }
		#txtMaxEvents { width: 6ex; text-align: right; }
		
		#controlPanel { background-color: ThreeDFace; border: 1px solid ThreeDShadow; }
		#cpContent { padding: 1ex; }
		#showHideButton
		{
			position: absolute; padding: 2px; right: -1px; top: -1px; width: 22px; height: 22px;
			border-left: solid 1px ThreeDShadow;
			border-bottom: solid 1px ThreeDShadow;
			font-family: webdings; font-size: 18px; line-height: 18px;
			text-align: center;
			cursor: pointer;
		}
		.cpExpanded { position: fixed; right: 0px; top: 0px; /*height: 100px;*/ /*padding-right: 25px;*/ /*width: 100%;*/ }
		.cpCollapsed { position: fixed; right: 0px; top: 0px; height: 25px; width: 25px; }
		.cpExpanded #cpContent { display: block; }
		.cpCollapsed #cpContent { display: none; }
		
		.event
		{
			position: relative;
			background-repeat: no-repeat;
			background-position: 2px 2px;
			border-bottom: 1px solid #D7D7D7;
			padding: 2px 4px 2px 18px;
		}
		.critical { background-image: url('/Themes/Common/Images/errorIcon.png'); background-color: LightYellow; }
		.error { background-image: url('/Themes/Common/Images/errorIcon.png'); background-color: LightYellow; }
		.warning { background-image: url('/Themes/Common/Images/warningIcon.png'); background-color: cyan; }
		.information { /*background-image: url('/Themes/Common/Images/infoIcon.png');*/ }
		.verbose {  }
		.source { display: none; margin-right: 1ex; width: 25ex; overflow: hidden }
		.id { display: none; }
		.time { display: inline-block; color: gray; margin-right: 1ex; width: 17ex; }
		.timestamp { display: none; }
		.threadid { display: none; }
		.message {}
	</style>
	<script type="text/javascript">
		var errorImage = new Image();
		errorImage.src = "/Themes/Common/Images/errorIcon.png";
		
		var warningImage = new Image();
		warningImage.src = "/Themes/Common/Images/warningIcon.png";

		var infoImage = new Image();
		infoImage.src = "/Themes/Common/Images/infoIcon.png";

		var defaultMaxEvents = 500;
		var maxEvents = defaultMaxEvents;
		
		function window::onload()
		{
			txtMaxEvents.value = maxEvents;
		}
		
		function writeEvents(events)
		{
			if(maxEvents == 0 || !events || events.length <= 0)
				return;
			
			if(events.length > maxEvents)
				events.splice(0, events.length - maxEvents);

			trimLog(events.length);
			
			var div = document.createElement("div");
			for(var i = 0; i < events.length; i++)
			{
				var e = events[i].replace("\r\n", "<br/>");
				div.innerHTML = e;
				log.appendChild(div.childNodes[0]);
			}
			
			if(autoScroll.checked)
				log.childNodes[log.childNodes.length - 1].scrollIntoView();
		}
		
		function trimLog(reserve)
		{
			if(!reserve)
				reserve = 0;

			if(log.childNodes.length + reserve > maxEvents)
			{
				var eventsToCut = log.childNodes.length + reserve - maxEvents;
				for(var i = 0; i < eventsToCut; i++)
				{
					log.removeChild(log.childNodes[0]);
				}
			}
		}
		
		function clearLog()
		{
			log.innerHTML = "";
		}
		
		function onMaxEventsChange()
		{
			var maxEventsValue = defaultMaxEvents;
			try
			{
				maxEventsValue = parseInt(txtMaxEvents.value);
				if(maxEventsValue < 0)
				{
					maxEventsValue = 0;
					txtMaxEvents.value = maxEventsValue;
				}
			}
			catch(e)
			{
				txtMaxEvents.value = defaultMaxEvents;
			}
			maxEvents = maxEventsValue;
			trimLog();
		}
		
		function toggleControlPanel()
		{
			if(controlPanel.className == "cpCollapsed")
			{
				controlPanel.className = "cpExpanded";
				showHideButton.innerHTML = "&#x0030;";
			}
			else
			{
				controlPanel.className = "cpCollapsed";
				showHideButton.innerHTML = "&#x0031;";
			}
		}

		function showHideColumn(input, columnName)
		{
			var rule = findRule('.' + columnName);
			if(rule)
				rule.style.display = input.checked ? "inline-block" : "none";
		}
		
		function findRule(ruleSelector)
		{
			var styleSheet = window.document.styleSheets[0];
			for(var i = 0; i < styleSheet.rules.length; i++)
			{
				var rule = styleSheet.rules[i];
				if(rule.selectorText == ruleSelector)
					return rule;
			}
		}
		
	</script>
</head>
<body>

<div id="log" style=""></div>
<div id="controlPanel" class="cpCollapsed">
	<div id="cpContent">
		<table cellspacing="10px">
		<tr valign="top">
			<td>
				Max events:<br />
				<input id="txtMaxEvents" type="text" value="" onchange="onMaxEventsChange()" />
			</td>
		</tr>
		<tr valign="top">
			<td>
				Columns:<br />
				<input type="checkbox" id="showHideSource" onclick="showHideColumn(this, 'source');" onfocus="this.blur()" /><label for="showHideSource">Show Source</label><br />
				<input type="checkbox" id="showHideTime" checked="checked" onclick="showHideColumn(this, 'time');" onfocus="this.blur()" /><label for="showHideTime">Show Time</label>
			</td>
		</tr>
		<tr valign="top">
			<td>
				View Options:<br />
				<input type="checkbox" id="autoScroll" checked="checked" onfocus="this.blur()" /><label for="autoScroll">Auto Scroll</label>
			</td>
		</tr>
		<tr valign="top">
			<td align="right">
				<input type="button" onclick="clearLog()" value="Clear" />
			</td>
		</tr>
		</table>
	</div>
	<div id="showHideButton" onclick="toggleControlPanel();">&#x0031;</div>
</div>
	
</body>
</html>
